<script>
import { Loading } from 'element-ui'

export default {
  name: 'ZhuYe',
  data () {
    return {
      loadingInstance: {}
    }
  },
  created () {
    this.loadingInstance = Loading.service({ text: 'wodagejiaoxian', background: 'rgba(0, 0, 0, 0.8)' })
  },
  mounted () {
    setTimeout(() => { // 以服务的方式调用的 Loading 需要异步关闭
      this.loadingInstance.close()
    }, 1000)
  },
  methods: {
    totop () {
      window.scrollTo(
        {
          top: 0,
          behavior: 'smooth'
        }
      )
    }
  }
}
</script>

<template>
  <el-container class="yemian">
    <el-backtop target=".page-component__scroll .el-scrollbar__wrap" style="z-index: 5"></el-backtop>
    <el-header style="padding: 0">
      <img src="@/assets/9.jpg" alt="" class="beijing">
      <dao-hang1></dao-hang1>
    </el-header>
    <el-main style="padding: 0;height: 100%;overflow: visible">
      <RouterView></RouterView>
    </el-main>
    <el-footer style="padding: 0;height: 100%">
      <ye-jiao></ye-jiao>
    </el-footer>
    <a href="#" class="totop" @click.prevent="totop"><i class="el-icon-top"></i></a>
  </el-container>
</template>

<style scoped lang="scss">
$blackbgd:rgba(0,0,0,0.6);
$textcol:white;
$hoverbgd:rgba(0,0,0,0.8);
//html{
//  display: flex!important;
//}
//.tongyi-design-pc{
//  overflow: hidden;
//}
.totop{
  width: 50px;
  height: 50px;
  //background: black;
  color: $textcol;
  font-size: 40px;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  background: $blackbgd;
  position: fixed;
  z-index: 2;
  right: 20px;
  bottom: 100px;
  border-radius: 15px;
  &:hover{
    background: $hoverbgd;
  }
}
.yemian{
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  min-height: 100vh;
  background: $blackbgd;
}
.beijing{
  //overflow: hidden;
  transform-origin: 50% 25%;
  width: 100vw;
  position: fixed;
  top: 0;
  z-index:-2;
  opacity:1;
  @media (max-width: 1650px) {
    top: 100px;
    transform: scale(1.4);
  };
  @media (max-width: 1260px) {
    transform: scale(1.8);
  };
  @media (max-width: 1085px) {
    transform: scale(2.2);
  };
  @media (max-width: 945px) {
    transform: scale(3.5);
  };
  @media (max-width: 670px) {
    transform: scale(5.1);
  };
}
</style>
